<script setup lang="ts">
import { ref, reactive, onMounted,getCurrentInstance } from "vue";
import axios from "axios";
import img1 from '../assets/image/1.jpeg'
import img2 from '../assets/image/2.jpeg'
import img3 from '../assets/image/3.jpeg'
import img4 from '../assets/image/4.jpeg'
import img5 from '../assets/image/5.jpeg'
import img6 from '../assets/image/6.jpeg'

import hot1 from '../assets/image/hot1.jpeg'
import hot2 from '../assets/image/hot2.jpeg'
import hot3 from '../assets/image/hot3.jpeg'
import hot4 from '../assets/image/hot4.jpeg'
import hot5 from '../assets/image/hot5.jpeg'
import hot6 from '../assets/image/hot6.jpeg'
import hot7 from '../assets/image/hot7.jpeg'
import hot8 from '../assets/image/hot8.jpeg'
let currentIndex = ref(0);
let show = ref(false);
let show_icon = ref(false);
const { ctx } = getCurrentInstance() as any;
const SelectList = reactive([
  {
    name: "全部",
  },
  {
    name: "H5",
  },
  {
    name: "海报",
  },
  {
    name: "长页",
  },
  {
    name: "表单",
  },
  {
    name: "互动",
  },
  {
    name: "电子画册",
  },
  {
    name: "视频",
  },
  {
    name: "解决方案",
  },
]);
const SearchList = reactive([
  "邀请函",
  "h5",
  "个人简历",
  "婚礼邀请函",
  "圣诞",
  "抽奖",
  "美食",
]);
const SwipperList=ref([
    {img:img1},
    {img:img2},
    {img:img3},
    {img:img4},
    {img:img5},
    {img:img6}
])
const girdsList=ref([
    {img:hot1},
    {img:hot2},
    {img:hot3},
    {img:hot4},
    {img:hot5},
    {img:hot6},
    {img:hot7},
    {img:hot8}
])
const list: any = ref(null);
onMounted(() => {
  axios({
    method: "GET",
    url: "http://10.31.71.56:7001/api/image",
  }).then((res) => {
    console.log(res);
    list.value = res.data.result;
  });
});

const state = reactive({
  step: 0,
});
let timer: any = null;
const change_left=()=>{
  show_icon.value = false;
  if(timer){
    clearInterval(timer);
  }
    timer=setInterval(()=>{
      state.step += 11;
      if(state.step>ctx?.$refs.grid.clientWidth-ctx?.$refs.grid_box.clientWidth &&state.step<=0){
        ctx.$refs.grid_box.style.left =state.step + "px"
        console.log(ctx.$refs.grid_box.style.left =state.step + "px");
        
      }else{
        clearInterval(timer);
        
      }
    },50)
}
const change_right=()=>{
  show_icon.value = true;
  if(timer){
    clearInterval(timer);
    
  }
    timer=setInterval(()=>{
      state.step -= 11;
      if(state.step>=ctx?.$refs.grid.clientWidth-ctx?.$refs.grid_box.clientWidth){
        ctx.$refs.grid_box.style.left =state.step + "px"
        console.log( ctx.$refs.grid_box.style.left =state.step + "px");
        
      }else{
        clearInterval(timer);
        
      }
    },50)
  }

const mouseover= (index:any) =>{
 
 
 
}  
</script>

<template>
  <div>
    <div class="c_login">
      <div class="c_login_left">
        <img src="../assets/image/c_logo.jpeg" alt="" />
      </div>
      <div class="c_login_center">
        <div class="c_login_center_top">
          <div class="c_login_center_top_wrap">
            <el-dropdown>
              <el-button type="primary">
                {{ SelectList[currentIndex].name
                }}<el-icon class="el-icon--right" v-if="show === false"
                  ><arrow-down /></el-icon
                ><el-icon v-else class="el-icon--right"><arrow-up /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(item, index) in SelectList"
                    :key="index"
                    @click="currentIndex = index"
                    >{{ item.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="c_login_center_top_heng">|</div>
          <div class="c_login_center_top_input">
            <input type="text" />
          </div>
          <div class="c_login_center_top_button">
            <el-icon><Search /></el-icon>
          </div>
        </div>
        <div class="c_login_center_bottom">
          <div class="c_login_center_bottom_like">
            <div v-for="(item, index) in SearchList" :key="index" >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="c_login_right"></div>
    </div>
    <div class="c_carousel">
      <div class="block text-center" m="t-4">
        <el-carousel trigger="click" height="260px">
          <el-carousel-item v-for="(item, index) in SwipperList" :key="index">
            <img class="c_carousel_img" :src="item.img" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="grid" ref="grid">
      <div class="grid_box" ref="grid_box" >
        <dl v-for="(item,index) in girdsList" :key="index" >
          <dt>
            <img class="grid_img" :src="item.img" alt="" />
          </dt>
        </dl>
        
      </div>
      <div class="grid_left_icon" v-if="show_icon" @click="change_left">
        <el-icon><ArrowLeftBold /></el-icon>
      </div>
      <div class="grid_right_icon" v-else @click="change_right">
        <el-icon><ArrowRightBold /></el-icon>
      </div>
    </div>
    <!-- <div class="recommendation">
      <div class="recommendation_top">
        <div class="recommendation_top_title">
          <span class="h3">今日推荐</span
          ><span class="span">开通会员免费用</span>
        </div>
        <div class="recommendation_top_checked">
          <a href="">精品推荐</a>
        </div>
        <div class="recommendation_top_more">
          <dl><dt>查看更多 》</dt></dl>
        </div>
      </div>
    </div> -->
  </div>
</template>

<style scoped>
.blue{
    color:skyblue
}
.black{
    color:black
}
/* content */
/* 今日推荐 */

.el-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 80px;
}
.c_login {
  width: 100%;
  height: 136px;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.c_login_left {
  width: 260px;
}
.c_login_left img {
  width: 100%;
  height: 72px;
}
.c_login_center {
  flex: 1;
}
.c_login_center_top,
.c_login_center_bottom {
  width: 656px;
  height: 40px;
  border: 1px solid rgb(25, 183, 245);
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
}
.c_login_center_bottom {
  border: none;
  height: 16px;
  margin-top: 16px;
}
.c_login_center_bottom .c_login_center_bottom_like {
  width: 80%;
  height: 16px;
  line-height: 16px;
  display: flex;
  justify-content: space-around;
}
.c_login_center_bottom .c_login_center_bottom_like div {
  color: #8e8c8c;
  font-size: 14px;
}
.c_login_center_bottom .c_login_center_bottom_like div:hover {
  color: #27a8f3;
  font-size: 14px;
}
.c_login_center_top_wrap {
  width: 79px;
}
.c_login_center_top_wrap .el-dropdown {
  height: 40px;
}
.c_login_center_top_wrap .el-dropdown .el-button {
  height: 38px;
  width: 79px;
  outline: none;
  background-color: #fff;
  border: none;
  color: #000;
}
.c_login_center_top_heng {
  width: 2px;
  font-size: 18px;
  line-height: 36px;
  color: #ccc;
}
.c_login_center_top_input {
  width: 508px;
  height: 38px;
  line-height: 38px;
}
.c_login_center_top_input input {
  display: flex;
  width: 506px;
  height: 38px;
  font-size: 16px;
  border: none;
  outline: none;
  padding-left: 10px;
}
.c_login_center_top_button {
  width: 52px;
  height: 40px;
  border: none;
  line-height: 40px;
  text-align: center;
}

.c_login_right {
  width: 260px;
}
/* 走马灯 */
l .demonstration {
  color: var(--el-text-color-secondary);
}
.c_carousel_img {
  width: 100%;
  height: 260px;
}
/* 宫格 */
.grid {
  width: 100%;
  height: 160px;
  line-height: 160px;
  overflow: hidden;
  position: relative;
}
.grid_box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
}
.grid_box dl{
  width: 192px;
  margin-right: 30px;

}
.grid_box dl:hover{
 position: relative;
 top: -10px;

}
.grid_img {
  width: 192px;
  height: 88px;
}
.grid_left_icon,.grid_right_icon {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  background-color: #fff;
  border: 1px solid #ccc;
  
  top: 50%;
  transform: translateY(-50%)
}
.grid_left_icon {
  left: 0px;
}
.grid_right_icon {
  right: 0px;
}
.el-icon{
    color: #000;
}

</style>
